~~~~作为编写组件的一个参考吧，在js输出组件样式的问题上 探讨一下 尽量简化组件的调用 function iceSlider(element,options) {                /*            功能：广告翻转切换控制              参数：            w:(int) 广告的宽度            h:(int) 广告的高度，默认为200px            autoTime:(int)切换停留时间，默认为1500ms            ad:(json) 为广告图片路径，链接，弹出目标等数据，如：ad:[{src:'1.jpg',href:'http://163.com',alt:'banner1'}            src:(str)图片src路径            href:(str)图片点击的链接            alt:(str)图片alt描述            up:(boolean) 滑动方向                        选项：                        prototype使用示例：            
     
            document.observe('dom:loaded',function()        //dom元素加载后执行            {                $('productsBanner').iceSlider({                ad:[                {src:'1.jpg',href:'http://www.baidu.com', target:'_blank', alt:'1.jpg'},                {src:'2.jpg',href:'http://www.baidu.com', target:'_blank', alt:'2.jpg'},                {src:'3.jpg',href:'http://www.baidu.com', target:'_blank', alt:'3.jpg'}                ]                });            });            原生js调用示例：            
     
            iceSlider('banner',{                ad:[                {src:'1.jpg',href:'http://www.baidu.com', target:'_blank', alt:'1.jpg'},                {src:'2.jpg',href:'http://www.baidu.com', target:'_blank', alt:'2.jpg'},                {src:'3.jpg',href:'http://www.baidu.com', target:'_blank', alt:'3.jpg'}                ],                up:false            });                             */        // 输出组件相关的样式 首先检测浏览器        var _IE = (function(){            var v=3, div = document.createElement('div'), all = div.getElementsByTagName('i');            while( div.innerHTML = '
     ', all[0]);            return v>4?v:false;        })();                 // ~~  判断$!==jQuery ~~可以基于Prototype 或 原生Js        if(window.$){            if(window.$ == jQuery){                var $ = function(id){
   return typeof id ==='string' ? document.getElementById(id) : id; }            }        }else{            var $ = function(id){
   return typeof id ==='string' ? document.getElementById(id) : id; }        }        /*--------- 获取参数 ---------*/        var h,w;            //切换广告的高度宽度，默认为200        var count;        //切换广告的数据，根据数据传入的数量自动设定        var ad;        var autoTime;          if(options!=undefined){                      h=options.h;              ad=options.ad;            count=options.count || options.ad.length;            autoTime=options.autoTime;         }                  autoTime=autoTime||1000;         h=h||200;         w=options.w || 200;         if(! window.sliderStyleStr){            window.sliderStyleStr = 'ul,li{list-style:none; margin:0; padding:0;}'+                (!options.up ?'.iceSlider{width: '+count * w+'px; height:'+h+'px} .iceSlider li{float:left;}':'') +                '.iceSlider li a{display:inline-block;}'+                '.iceSlider  li a img{border:0; width:'+w+'px; height:'+h+'px; margin-bottom:-3px; margin-bottom:0 \9;}'+                '.rotatorNumber{height:20px; position:absolute; right:5px; bottom:10px;}'+                '.rotatorNumber li{float:left; width:20px; height:100%; margin:0 5px; color:#333;  background:#fff; border:1px solid #aaa; text-align:center; cursor:default;}'+                '.rotatorNumber .on{border:1px solid hotpink;}';            if(_IE){ document.createStyleSheet("javascript:sliderStyleStr");             }else{                var oStyle =document.createElement('style');                oStyle.innerHTML = window.sliderStyleStr;                document.getElementsByTagName('head')[0].appendChild(oStyle);            }        }                /*----------- 生成html --------*/        var li="";        var li2="";        var alt="";        for(var i=0;i
     
      ';            var cls="";            if(i==0)cls=' class="on"';            li2+='
      
       '+parseInt(i+1)+'';                            }                var html='
       
        
         '+li+'
        
        
         '+li2+'
        
       
       ';         $(element).innerHTML=html;         var _target=ad[0].target!='_blank'?'_self':'_blank';        //初始化标题        $('bannerTitle').innerHTML='
       '+ad[0].alt+'';                /*----------- 生成html end --------*/        var element=$(element);            var viewPort = element.getElementsByTagName('div')[0]; //顶层容器 视口        viewPort.style.height = h +'px';        viewPort.style.width = w +'px';        var count=$('iceSlider').getElementsByTagName('li').length; //内容页数        var a=$('iceSlider').getElementsByTagName('a'); //包裹图片的a                  function each(list, fun){
   //用于遍历的功能函数          for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }         };                 // var objs = $(element).select('ul')[1].select("li");        var objs = $(element).getElementsByTagName('ul')[1].getElementsByTagName("li"); //切换的数字        //实例化轮播组件        var tv = new TransformView(             viewPort,             $(element).getElementsByTagName('ul')[0],              h,             count,             {              //当前切换数字 on             Up:options.up,             onStart : function(){ each(objs, function(o, i){ o.className = tv.Index == i ? "on" : "";   }) },             Pause:autoTime            }        );                  tv.Start(); //播放                  each(objs, function(o, i){ //鼠标悬停 数字序号上 切换内容页          o.onmouseover = function(){           o.className = "on";           tv.Auto = false;//暂停自动播放 设置索引 然后播放           tv.Index = i;           tv.Start();           //切换到当前内容页的图片说明           var _target=a[i].target!='_blank'?'_self':'_blank';           $('bannerTitle').innerHTML='
       '+a[i].getElementsByTagName('img')[0].alt+'';           };          o.onmouseout = function(){
   //鼠标从数字序号离开 恢复自动播放           o.className = "";           tv.Auto = true;           tv.Start();          }         });             } //lihuoSlider  end         var iceSliderClass = {      create: function() {
   //通过执行create方法 返回构造函数         return function() {            this.$=(window.$ && window.$!=jQuery) ? window.$ : function(id){
   return typeof id ==='string' ? document.getElementById(id) : id; } ;            this.initialize.apply(this, arguments);//构造函数的参数直接传入初始化方法            }          }    }        Object.extend = function(destination, source) {
   //浅拷贝方式扩展对象     for (var property in source) {      destination[property] = source[property];     }     return destination;    }        var TransformView = iceSliderClass.create(); //create方法返回构造函数    TransformView.prototype = {      //容器对象,滑动对象,切换参数,切换数量,选项对象      initialize: function(ViewPort, sliderCon, psize, count, options) {         if(psize <= 0 || count <= 0) return;         var oViewPort = this.$(ViewPort), oSliderCon = this.$(sliderCon), oThis = this; //this为轮播组件对象                 this.Index = 0;//当前索引                  this._timer = null;//定时器         this._sliderCon = oSliderCon;//滑动对象         this._psize = psize;//切换参数         this._count = count || 0;//切换数量         this._target = 0;//目标参数                  this.SetOptions(options);                  this.Up = !!this.options.Up;         this.Step = Math.abs(this.options.Step); //步长         this.Time = Math.abs(this.options.Time);          this.Auto = !!this.options.Auto;          this.Pause = Math.abs(this.options.Pause);         this.onStart = this.options.onStart;         this.onFinish = this.options.onFinish;                  oViewPort.style.overflow = "hidden"; //容器 相对定位 溢出隐藏         oViewPort.style.position = "relative";                 oSliderCon.style.position = "absolute"; //内容 绝对定位在容器左上角         oSliderCon.style.top = oSliderCon.style.left = 0;        },      //设置默认属性           SetOptions: function(options) {         this.options = {
   //默认值          Up:   true,//是否向上(否则向左)          Step:  5,//滑动变化率          Time:  10,//滑动延时          Auto:  true,//是否自动转换          Pause:  2000,//停顿时间(Auto为true时有效)          onStart: function(){},//开始转换时执行          onFinish: function(){}//完成转换时执行         };         Object.extend(this.options, options || {});        },      //开始切换设置      Start: function() {         if(this.Index < 0){
   //Index越界则修正          this.Index = this._count - 1;         } else if (this.Index >= this._count){ this.Index = 0; }                  this._target = -1 * this._psize * this.Index;         this.onStart();         this.Move();        },      //移动      Move: function() {         //  var _img=this.$('ul.iceSlider')[0].select('img');         clearTimeout(this._timer);         var oThis = this,          style = this.Up ? "top" : "left",          iNow = parseInt(this._sliderCon.style[style]) || 0,          iStep = this.GetStep(this._target, iNow);//步长 非匀速的 剩余距离的1/5步进                  if (iStep != 0) {          this._sliderCon.style[style] = (iNow + iStep) + "px";          this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);         } else {
   //步长为0 表示到达终点 若为自动播放 则继续start()          this._sliderCon.style[style] = this._target + "px";          this.onFinish();                   if (this.Auto) {                   this._timer = setTimeout(function(){                 oThis.Index++;                  oThis.Start();                 var curA = oThis.$('iceSlider').getElementsByTagName('img')[oThis.Index].parentNode;                 oThis.$('bannerTitle').innerHTML='
       '+curA.getElementsByTagName('img')[0].alt+'';                 }, this.Pause );             }         }      },      //获取步长      GetStep: function(iTarget, iNow) {         var iStep = (iTarget - iNow) / this.Step; //剩余距离1/5步长         if (iStep == 0) return 0;         if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); //最小步长1px         return iStep; //不一定能整除吧？iStep=1.5也可以?        },      //停止      Stop: function(iTarget, iNow) {         clearTimeout(this._timer);         this._sliderCon.style[this.Up ? "top" : "left"] = this._target + "px";        }    };